<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <ant-input-search
          :options="options"
          :Show="Show"
          @ChangeDown="ChangeDown"
          :InputSearch="InputSearch"
        />
      </a-form-item>
      <a-form-item label="页面布局" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-radio-group @change="showWay" v-decorator="['showWay']">
          <a-radio value="1">上下结构</a-radio>
          <a-radio value="0">左右结构</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="位置" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-select
          v-decorator="[
          'position',
          {rules: [{ required: true, message: '请选择位置' }]}
        ]"
          placeholder="请选择位置"
        >
          <a-select-option value="top">上边</a-select-option>
          <a-select-option value="bottom">下边</a-select-option>
          <a-select-option v-if="showWayPosition" value="left">左边</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-select
          v-decorator="[
          'type',
          {rules: [{ required: true, message: '选择类型' }]}
        ]"
          placeholder="选择类型"
          @change="handleSelectChange"
        >
          <a-select-option value="SmallCardBorder">小组件</a-select-option>
          <a-select-option value="Pie">饼图</a-select-option>
          <a-select-option value="Columnar">柱状图</a-select-option>
        </a-select>
      </a-form-item>
      <div v-if="componentType==='SmallCardBorder'">
        <a-form-item label="内容" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-input
            v-decorator="[
          'count',
          {rules: [{ required: true, message: '请输入内容' }]}
        ]"
          />
        </a-form-item>
        <a-form-item label="字体大小" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-input-number :min="1" v-decorator="['fontSize']" />
        </a-form-item>
        <a-form-item label="颜色" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <colorPicker style="margin-right:10px" v-model="selectColor" />
          <a-input
            style="width:83%"
            placeholder="输入颜色"
            size="large"
            v-decorator="['color']"
            @change="ColorInputChange"
          ></a-input>
        </a-form-item>
      </div>
      <div v-if="componentType==='Pie'||componentType==='Columnar'">
        <a-form-item label="高度" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-input-number
            style="width:100%"
            :min="1"
            v-decorator="['height',{rules:[{
              required:true,
              message:'请输入高度'
          }]}]"
          />
        </a-form-item>
        <a-form-item label="api数据地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-input
            placeholder="请输入地址"
            v-decorator="['sourceData',{rules:[{
              required:true,
              message:'请输入地址'
          }]}]"
          />
        </a-form-item>
      </div>
      <a-form-item :wrapper-col="{ span: 18, offset: 5 }">
        <a-button type="primary" html-type="submit">创建</a-button>
      </a-form-item>
      <a-form-item label="列表" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <ant-table
          :columns="columns"
          :data="dataList"
          more
          @SelectAction="SelectAction"
          @Delete="Delete"
          :actions="actions"
        ></ant-table>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from "vue-property-decorator";
@Component({
  name: "page-component",
  layout: "menu"
})
export default class PageComponent extends Vue {
  form: any = {};
  options: object = {
    zh: "",
    mn: "",
    en: ""
  };
  InputSearch: string = "";
  selectColor: string = "#ccc";
  componentType: string = "SmallCardBorder";
  Show: boolean = false;
  showWayPosition: boolean = false;
  dataList: any[] = [];
  actions: string[] = ["编辑"];
  columns: any[] = [
    {
      title: "位置",
      dataIndex: "position",
      width: 100
    },
    {
      title: "类型",
      dataIndex: "type",
      width: 100
    },
    {
      title: "标题",
      dataIndex: "title",
      width: 100
    },
    {
      title: "内容",
      dataIndex: "count",
      width: 100
    },
    {
      title: "字体大小",
      dataIndex: "fontSize",
      width: "20%"
    },
    {
      title: "颜色",
      dataIndex: "color",
      width: 100
    },
    {
      title: "高度",
      dataIndex: "height",
      width: 100
    },
    {
      title: "api数据地址",
      dataIndex: "sourceData",
      width: "20%"
    },
    {
      title: "操作",
      key: "action",
      scopedSlots: { customRender: "action" },
      fixed: "right",
      width: 100
    }
  ];
  created() {
    const _this: any = this;
    this.form = _this.$form.createForm(this);
    this.setValue();
  }
  setValue() {
    setTimeout(() => {
      this.form.setFieldsValue({
        ["showWay"]: "1",
        ["type"]: "SmallCardBorder",
        ["fontSize"]: 30,
        ["color"]: "#ccc"
      });
    }, 0);
  }
  ChangeDown(n: object) {
    this.options = n;
    this.InputSearch = JSON.stringify(n);
    this.Show = !this.Show;
  }
  showWay(e: any) {
    if (Number(e.target.value) === 0) {
      this.showWayPosition = true;
      return;
    }
    this.showWayPosition = false;
  }
  handleSelectChange(value) {
    this.componentType = value;
  }
  ColorInputChange(val: any) {
    this.selectColor = val.target.value;
  }
  handleSubmit(e: Event) {
    const _this: any = this;
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
        values.title = _this.$language(this.options);
        values.id = Date.now() + Math.round(Math.random() * 100);
        const type = this.typeCasting(this.componentType);
        values.type = type;
        this.dataList.push(values);
        this.form.resetFields();
        this.setValue();
        this.componentType = "SmallCardBorder";
      }
    });
  }
  typeCasting(val: string) {
    let data = "";
    switch (val) {
      case "SmallCardBorder":
        data = "小组件";
        break;
      case "Pie":
        data = "饼图";
        return;
        break;
      case "Columnar":
        data = "柱状图";
        break;
    }
    return data;
  }
  Delete(n: { id }) {
    const list = this.dataList;
    for (let i = 0; i < list.length; i++) {
      if (n.id === list[i].id) {
        list.splice(i, 1);
        break;
      }
    }
  }
  SelectAction(title: string, record: any[]) {
    console.log(title, record);
  }
  @Watch("selectColor")
  newselectColor(n: string, o: string) {
    this.form.setFieldsValue({ ["color"]: n });
  }
}
</script>